<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
     <el-row>
       <el-col :span="22">
          <el-form-item label="二级机构" prop="departmentOrgId"  class="item">
            <span>{{form.departmentOrgName}}</span>
          </el-form-item>
        </el-col>
     </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预算经费" class="item">
            <span>{{form.budgetFunds}}万元</span>
            </el-input>
          </el-form-item>
          </el-col>
           <el-col :span="9">
            <el-form-item label="项目类型" prop="projectType" class="item">
              <span>{{projectTypFormat(form.projectType)}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人姓名" class="item" >
           <span>{{form.projectLeader}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人职称" class="item" >
           <span>{{form.ownerTitle}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人电话" class="item" >
           <span>{{form.contactPhone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人邮箱" class="item" >
           <span>{{form.ownerEmail}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {getByNo} from "@/api/labbase/instrumentation"
import {searchEmployee} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";
import { getOrgName} from "@/api/labdata/orgnization";
import {listEmployee} from "@/api/labdata/employee";
  export default {
    name: "projectInstrumentDetail",
    components:{Treeselect},
    data() {
      return {
         //项目类型
         projectTypeOptions: [],
        //部门列表
        deptList:[],
        // 部门树选项
        deptOptions: [],
       //员工列表
       userList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    props:{
      instrument:Object,
    },
    created() {
      this.getDicts("project_Instrument_project_type").then(response => {
        this.projectTypeOptions = response.data;
      });
      if(this.instrument){
        this.form = this.instrument;
        this.getDeptName();
        searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });

      }else{
        this.form  = {};
      }
    },
    methods: {
      getInstrument(){
        return this.form;
      },
      getDeptName(){
        getOrgName(this.form.departmentOrgId).then(response=>{
          this.form.departmentOrgName = response.msg;
          this.$forceUpdate();
        });
      },
        // 所在部门字典翻译
       departmentOrgIdFormat(value) {
         var  datas = this.deptList
          for(let key in datas){
              if(datas[key].orgId == value){
                  return datas[key].orgName;
              }
          }
          return "";
       },
       // 项目负责人翻译
       projectTypFormat(value) {
          var  datas = this.projectTypeOptions
          for(let key in datas){
              if(datas[key].dictValue == value){
                  return datas[key].dictLabel;
              }
          }
          return "";
       },

    //  projectTypeFormat(row, column) {
    //   return this.selectDictLabel(this.projectTypeOptions, row.projectType);

    // },

    }
  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .item {
    margin-bottom: 2px;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
